<template>
	<view class="item_block">
		<!-- 顶部标题部分 -->
		<view class="top_title_block">
			<!-- 小标题 -->
			<view class="small_title">
				<text class="title_text">{{ countryObj.continent }}</text>
				<text style="margin: 0 12rpx;color: #838282;">--></text>
				<text class="title_text">{{ countryObj.country }}</text>
			</view>
			<!-- 大标题 -->
			<view class="big_title">
				<view class="title_con1">{{ countryObj.country }}</view>
				<view class="title_con2">{{ countryObj.continent_en }}</view>
			</view>
		</view>
		<!-- 内容部分 -->
		<view class="content_block">
			<!-- 国家描述 -->
			<view class="describe_block">
				<view class="describe_title">国家描述</view>
				<view class="describe_text" :class="{ active: flagDescribe }">
					<text>{{ countryBaseInfo.abstracts }}</text>
				</view>
				<view class="show-or-noshow" @click="showTag('Describe')">
					{{ flagDescribe ? "收起" : "查看全部"}}
				</view>
				<view class="describe_msg">
					<view class="describe_msgCon">
						<text class="msgCon_title">面积：</text>
						<text class="msgCon_number">{{ countryBaseInfo.land_area }}km²</text>
					</view>
					<view class="describe_msgCon">
						<text class="msgCon_title">民族：</text>
						<text class="msgCon_number">{{ countryBaseInfo.nation }}</text>
					</view>
					<view class="describe_msgCon">
						<text class="msgCon_title">GDP：</text>
						<text class="msgCon_number">{{ countryBaseInfo.per_capita_gdp }}$/人</text>
					</view>
					<view class="describe_msgCon">
						<text class="msgCon_title">人口：</text>
						<text class="msgCon_number">{{ countryBaseInfo.total_population }}万人</text>
					</view>
				</view>
			</view>
			<!-- 当地人生活 -->
			<view class="life_block">
				<view class="life_title">当地人生活</view>
				<view class="life_text life_textFill" :class="{ active: flagLife }">
					<text>{{ countryBaseInfo.local_life }}</text>
				</view>
				<view class="show-or-noshow" @click="showTag('Life')">
					{{ flagLife ? "收起" : "查看全部"}}
				</view>
				<!-- 最佳旅行季节 -->
				<view class="season_block">
					<view class="season_title">最佳旅行季节</view>
					<view class="season_con">
						<!-- 旺季 -->
						<template v-for="(item, index) in travelSeason">
							<view v-if="item.month_star" :key="JSON.stringify(item)" class="hot_season">
								<view class="first_border">{{ index === 0 ? "旺季" : "淡季" }}</view>
								<view class="second_border">{{ item.month_star }}</view>
								<view class="third_border">{{ item.description }}</view>
							</view>
						</template>
					</view>
				</view>
				<!-- 消费水平 -->
				<view class="expense_block">
					<view class="expense_title">消费水平（物价对比）</view>
					<view class="expense_con" v-if="levelList && levelList.length > 0">
						<!-- 旺季 -->
						<template v-for="(item, index) in levelList">
							<view class="expense_msg" :key="index">
								<view class="first_border">{{ typeList[item.con_type] }}</view>
								<view class="second_border">
									<text>{{ item.local_money }}</text>
									<text style="margin-right: 20rpx;">{{ item.monetary_unit }}</text>
									<text>约{{ item.rmb }}人民币</text>
								</view>
							</view>
						</template>
					</view>
					<view class="expense_title" style="margin-top: 40rpx;">汇率</view>
					<view>
						<text class="number_tigs">1人民币</text>
						<text style="margin: 0 10rpx;">=</text>
						<text class="number_num">{{ countryBaseInfo.exchange_rate }}</text>
						<text class="number_tigs">{{ countryBaseInfo.currency_name }}</text>
					</view>
				</view>
			</view>
			<!-- 信仰与禁忌 -->
			<view class="faith_block">
				<view class="faith_title">信仰与禁忌</view>
				<view class="faith_text" :class="{ active: flagFaith }">
					<text>{{ countryBaseInfo.faith_taboo }}</text>
				</view>
				<view class="show-or-noshow" @click="showTag('Faith')">
					{{ flagFaith ? "收起" : "查看全部"}}
				</view>
			</view>
			<!-- 历史 -->
			<view class="history_block">
				<view class="history_title">历史</view>
				<view class="history_text" :class="{ active: flagHistory }">
					<text>{{ countryBaseInfo.history }}</text>
				</view>
				<view class="show-or-noshow" @click="showTag('History')">
					{{ flagHistory ? "收起" : "查看全部"}}
				</view>
			</view>
			<!-- 文化 -->
			<view class="culture_block">
				<view class="culture_title">文化</view>
				<view class="culture_text" :class="{ active: flagCulture }">
					<text>{{ countryBaseInfo.culture }}</text>
				</view>
				<view class="show-or-noshow" @click="showTag('Culture')">
					{{ flagCulture ? "收起" : "查看全部"}}
				</view>
			</view>
			<!-- 环境 -->
			<view class="environment_block">
				<view class="environment_title">环境</view>
				<view class="environment_text" :class="{ active: flagEnv }">
					{{ countryBaseInfo.environment }}
				</view>
				<view class="show-or-noshow" @click="showTag('Env')">
					{{ flagEnv ? "收起" : "查看全部"}}
				</view>
			</view>
			<!-- 出入境注意事项 -->
			<view class="attention_block">
				<view class="attention_title">出入境注意事项</view>
				<view class="attention_text" :class="{ active: flagAtt }">
					<text>{{ countryBaseInfo.attention }}</text>
				</view>
				<view class="show-or-noshow" @click="showTag('Att')">
					{{ flagAtt ? "收起" : "查看全部"}}
				</view>
			</view>
			<!-- 紧急电话 -->
			<view class="urgentTel_block" style="border: none;">
				<view class="urgentTel_title">紧急电话</view>
				<view class="urgentTel_text" :class="{ active: flagTel }">
					<text>{{ countryBaseInfo.urgentTel }}</text>
				</view>
				<view class="show-or-noshow" @click="showTag('Tel')">
					{{ flagTel ? "收起" : "查看全部"}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from "@/utils/http.js";

	export default {
		data() {
			return {
				countryObj: {},
				countryBaseInfo: {},
				travelSeason: {},
				levelList: {},
				typeList: {
					1: "啤酒",
					2: "咖啡",
					3: "汉堡",
					4: "T恤",
				},
				flagDescribe: false,
				flagLife: false,
				flagFaith: false,
				flagHistory: false,
				flagCulture: false,
				flagEnv: false,
				flagAtt: false,
				flagTel: false,
			}
		},
		onLoad: function(option) {
			console.log("跳转的", option)
			console.log(option.id)
			console.log(option.countryEnKey)
			http.request(`product/desc/CountryDetail/${encodeURIComponent(option.id)}/${option.countryEnKey}`, "",
					"get")
				.then(res => {
					console.log(res.data),
					this.countryObj = res.data;
					this.countryBaseInfo = res.data.country_base_info;
					this.travelSeason = res.data.travel_season_list;
					this.levelList = res.data.desc_con_level_list;
				})
		},
		methods: {
			showTag(name) {
				console.log(this[`flag${name}`]);
				this[`flag${name}`] = !this[`flag${name}`];
			}
		}
	}
</script>

<style scoped>
	.item_block {
		width: 100%;
		height: max-content;
		padding-bottom: 80rpx;
		box-sizing: border-box;
	}

	.top_title_block .small_title {
		padding: 40rpx 32rpx;
		box-sizing: border-box;
	}

	.small_title .title_text {
		font-size: 32rpx;
		color: #445356;
	}

	.big_title {
		width: max-content;
		margin: auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.big_title .title_con1 {
		background: #445356;
		color: #FFFFFF;
		font-size: 36rpx;
	}

	.big_title .title_con1,
	.big_title .title_con2 {
		width: 200rpx;
		height: 72rpx;
		border: 1px solid #445356;
		font-size: 36rpx;
		text-align: center;
		line-height: 72rpx;
	}

	.big_title .title_con2 {
		color: #445356;
	}

	.item_block .content_block {
		width: 100%;
		height: max-content;
		margin-top: 36rpx;
		border-top: 1px dashed #cfcece;
	}

	.content_block .describe_block,
	.content_block .life_block,
	.content_block .faith_block,
	.content_block .history_block,
	.content_block .culture_block,
	.content_block .environment_block,
	.content_block .attention_block,
	.content_block .urgentTel_block {
		width: 100%;
		height: max-content;
		padding: 32rpx;
		box-sizing: border-box;
		border-bottom: 1px dashed #cfcece;
	}

	.describe_block .describe_title,
	.content_block .life_title,
	.faith_block .faith_title,
	.history_block .history_title,
	.culture_block .culture_title,
	.environment_block .environment_title,
	.attention_block .attention_title,
	.urgentTel_block .urgentTel_title {
		width: 300rpx;
		height: 68rpx;
		background: #445356;
		color: #FFFDEF;
		font-size: 28rpx;
		text-align: center;
		line-height: 68rpx;
		border-radius: 20rpx;
		margin: auto;
		margin-bottom: 30rpx;
	}

	.describe_block .describe_text {
		text-indent: 1em;
		font-size: 28rpx;
		margin-bottom: 30rpx;
		line-height: 60rpx;
	}

	.content_block .life_text,
	.faith_block .faith_text,
	.history_block .history_text,
	.culture_block .culture_text,
	.environment_block .environment_text,
	.attention_block .attention_text,
	.urgentTel_block .urgentTel_text {
		height: 420rpx;
		overflow: hidden;
		text-indent: 1em;
		font-size: 28rpx;
		margin-bottom: 30rpx;
		line-height: 60rpx;
		text-overflow: ellipsis;
	}

	.attention_block .attention_text {
		height: 300rpx;
	}

	.urgentTel_block .urgentTel_text {
		height: 120rpx;
		text-indent: 0em;
	}

	.describe_block .describe_text.active,
	.content_block .life_text.active,
	.faith_block .faith_text.active,
	.history_block .history_text.active,
	.culture_block .culture_text.active,
	.environment_block .environment_text.active,
	.attention_block .attention_text.active,
	.urgentTel_block .urgentTel_text.active {
		height: auto;
		overflow: visible;
	}

	.describe_block .describe_msg {
		width: 100%;
		height: max-content;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.describe_msg .describe_msgCon {
		width: 300rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.describe_msgCon .msgCon_number {
		color: #838282;
	}

	.life_block .season_block,
	.life_block .expense_block {
		width: 100%;
		height: max-content;
		margin-bottom: 40rpx;
	}

	.season_title,
	.expense_title {
		font-size: 32rpx;
		color: #445356;
		margin-bottom: 30rpx;
	}

	.season_block .season_con,
	.expense_block .expense_con {
		width: 100%;
	}

	.season_con .hot_season {
		width: 100%;
		height: max-content;
		display: flex;
		border: 2rpx solid #445356;
		border-radius: 16rpx;
		margin-bottom: 12rpx;
		font-size: 28rpx;
		display: table;
	}

	.season_con .first_border,
	.season_con .second_border,
	.season_con .third_border {
		vertical-align: middle;
		display: table-cell;
		text-align: center;
	}

	.season_con .first_border {
		width: 100rpx;
		background-color: #455357;
		color: #FFFFFF;
		border-radius: 16rpx 0 0 16rpx;
	}

	.season_con .second_border {
		width: 170rpx;
		line-height: 70rpx;
		background-color: #7c8689;
		color: #FFFFFF;
	}

	.season_con .third_border {
		width: 416rpx;
		background-color: #FFFFFF;
		color: #818181;
		padding: 16rpx 0 16rpx 12rpx;
		box-sizing: border-box;
		border-radius: 0 16rpx 16rpx 0;
	}

	.expense_con .expense_msg {
		width: 100%;
		height: max-content;
		display: flex;
		margin-bottom: 12rpx;
		font-size: 28rpx;
	}

	.expense_msg .first_border {
		width: 15%;
		background: #b5babc;
		text-align: center;
		color: #FFFFFF;
		padding: 16rpx;
		font-size: 28rpx;
		border-radius: 50%;
	}

	.expense_msg .second_border {
		width: 100%;
		display: flex;
		align-items: center;
		padding-left: 40rpx;
		background: #FFFFFF;
		color: #000;
		margin-left: 20rpx;
		border-radius: 40rpx;
		box-sizing: border-box;
	}

	.expense_block .number_tigs {
		color: #818182;
	}

	.expense_block .number_num {
		font-size: 66rpx;
		color: #818182;
		font-weight: bold
	}

	.show-or-noshow {
		text-align: center;
		color: #169FE6;
	}
</style>

<style>
	page {
		height: 100%;
		width: 100%;
		background-color: #F2F2F2;
	}
</style>
